<template>
	<div id="operatingData" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
						<el-breadcrumb-item>普通水卡</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/virtualCardList' }">水卡</el-breadcrumb-item>
						<el-breadcrumb-item>操作记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<button class="same-search-btns" @click="returnBack">返回</button>
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span same-search-fisrt">操作时间:</span>
							<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
								value-format="yyyy-MM-dd" placeholder="请选择时间"></el-date-picker>
							<div class="same-interval">至</div>
							<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="请选择时间"></el-date-picker>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="search()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 搜索更多 -->
				<div>
					<div class="same-search-left new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span">状态:</span>
							<el-select size="medium" v-model="type" placeholder="请选择" style="width:140px">
								<el-option v-for="item in selected" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="search()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
			</div>
		</div>
		<div class="same-table-box">
			<div class="table_box">

				<div class="common-table-outer">


					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						<el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="add_time" label="时间">
						</el-table-column>

						<el-table-column align="center" prop="type_name" label="类型">
						</el-table-column>

						<el-table-column align="center" prop="card_num" label="卡号">
						</el-table-column>

						<el-table-column align="center" prop="account_name" label="操作人">
						</el-table-column>

						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>

					<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
						<el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
							:page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

	export default {
		name: 'operatingData',
		data: function () {
			return {
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				//tableData: [],//返回的结果集合
				totalDataNumber: 0,//数据的总数,
				water_id: 0,
				time: '',
				address: [],
				selected: [
					{
						value: '',
						label: '全部'
					}
					, {
						value: 1,
						label: '解绑水卡'
					}, {
						value: 2,
						label: '水卡挂失'
					}, {
						value: 3,
						label: '解除水卡挂失'
					}, {
						value: 4,
						label: '水卡绑定'
					}],
				value: '',
				tableData: [],
				start_time: '',
				end_time: '',
				type: '',
				loading: true, //加载动画
				isLoad: false, //是否请求接口

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
			}
		},
		// 初始化执行方法
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			var that = this;
			that.water_id = that.$route.query.water_id;
			var pageSize = that.pageSize;        // 每页显示条数
			var page = that.pageNo;              // 当前页
			that.waterCardList(page, pageSize);  // 获取申请实体卡审核列表
		},
		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			reset() {
				this.start_time = '';
				this.end_time = '';
				this.type = '';
				this.pageNo = 1;
				this.waterCardList(this.pageNo, this.pageSize);
			},
			//分页
			handleSizeChange(val) {
				var that = this;
				that.pageSize = val;
				that.tableData = [];
				that.pageNo = 1;
				that.waterCardList(that.pageNo, val);  // 获取申请实体卡审核列表
			},
			handleCurrentChange(val) {
				var that = this;
				that.tableData = [];
				that.pageNo = val;
				that.waterCardList(val, that.pageSize);
			},
			//点击查看
			handleEditShow(index, row) {
				this.$router.push({ path: '/lookCardMsg' })
			},
			//点击充值
			handleTopUp() {
				this.$router.push({ path: '/cardrecharge' })
			},
			// 获取申请实体卡审核列表
			waterCardList: function (page, pageSize) {
				var that = this;
				that.loading = true; //打开loading动画
				that.isLoad = false;
				that.$post({
					url: "Partner/WaterCard/card_operation",
					data: {
						pageSize: pageSize, page: page, water_id: that.water_id, type: that.type,
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : ''
					},
					success: (data) => {
						that.loading = false; //打开loading动画
						that.isLoad = true;
						that.tableData = []; // 清空数据
						if (data.code == 1000) {
							$.each(data.data.data, function () {
								that.tableData.push(this)
							});
							that.totalDataNumber = Number(data.data.count);   // 总的数据
						} else {
							if (that.tableData.length <= 0 && data.data.count <= 0) {
								that.totalDataNumber = 0;
							}
							/*this.$message({
								 type:'error',
								 showClose: true,
								 message: '无数据',
								 center: true
						 });*/
						}
					}
				})
			},
			//搜索
			search() {
				var that = this;
				that.pageNo = 1;
				that.tableData = [];
				that.waterCardList(1, that.pageSize);
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化 
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		}
	}
</script>

<style>
	#operatingData {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
</style>